<template>
  <div class="ringpie-chart">
    <div class="charts-box">
      <div class="bg-box"></div>
        <div class="echarts-box">
          <chart
            :options="pie"
            ref="pie"
            auto-resize
          />
          <div class="text-box color3">
            <p class="label f12 color6">教学内容总数</p>
            <h1 class="number f12">{{ chartData.sum }}</h1>
          </div>
        </div>
    </div>
    <div class="legend-box" :class="chartData.list.length <= 4 ? 'around' : ''">
      <div class="small-charts-box" :class="chartData.list.length > 4 && chartData.list.length < 7 ? 'width33' : chartData.list.length == 7 ? 'quarter' : ''" v-for="(item, index) in chartData.list" :key="item.key">
        <small-pie :pieData="item" :total="chartData.sum"></small-pie>
      </div>
    </div>
  </div>
</template>

<script>
import Echarts from "vue-echarts/components/ECharts";
import "echarts/lib/chart/pie";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/legend";
import 'zrender/lib/svg/svg';
let echarts1 = require("echarts/lib/echarts");
import smallPie from './smallPie'
export default {
  props: ['chartData'],
  computed: {
  },
  data() {
    return {
      pie: {
        series: [
          {
            type: "pie", // 系列1类型: 饼图
            center: ["50%", "50%"], // 饼图的中心(圆心)坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
            radius: ["50%", "90%"], // 饼图的半径，数组的第一项是内半径，第二项是外半径。[ default: [0, '75%'] ]
            // 可以将内半径设大显示成圆环图（Donut chart）。
            clockWise: true, // 饼图的扇区是否是顺时针排布。[ default: true ]
            startAngle: 90, // 起始角度，支持范围[0, 360]。 [ default: 90 ]
            hoverAnimation: true, // 是否开启 hover 在扇区上的放大动画效果。[ default: true ]
            avoidLabelOverlap: false,
            labelLine: {
              // 标签的视觉引导线样式，在 label 位置 设置为'outside'的时候会显示视觉引导线。
              show: false
            },
            label: {
              show: false
            },
            animationType: 'scale',
            data:[],
          }
        ],
        tooltip: {
          show: true,
          trigger: 'item',
          backgroundColor: '#fff',
          padding: 10,
          extraCssText: 'text-align:left; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);',
          textStyle: {
              fontSize: 12,
              fontWeight: 'normal',
              color: '#666'
          },
          showContent: true,
          position: function (point, params, dom, rect, size){
            return [rect.x + rect.width /2, rect.y  - (size.contentSize[1] - rect.height/2)]
          }
        }
      },
      
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.setPie()
    })
  },
  components: {
    chart: Echarts,
    smallPie
  },
  filters: {
    formatNumber(number){
      return Math.round(number)
    }
  },
  watch:{
    chartData: {
      handler(newVal, oldVal){
        if(newVal){
          this.setPie()
        }
      },
      deep: true
    }
  },
  methods: {
    setPie(){
      let self = this
      this.$nextTick(() => {
        this.chartData.list.forEach(item => {
          //{"sum": 0, "list": [{"name": "xxxx", "length": 66, "colors": {"start": "#08BC72", "end": "#1C223B"}}, ...]}
          this.pie.series[0].data.push({
            name: item.name,
            value: item.length,
            itemStyle: {
              color: new echarts1.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0, color: item.colors.start
              }, {
                offset: 1, color: item.colors.end
              }], false),
              borderColor: 'transparent',
              borderWidth: 0
            },
            emphasis: {
              itemStyle: {
                borderWidth: 0
              }
            }
          })
        })
        this.pie.tooltip.formatter = function(params){
          return `${params.name}<br/><span class='fontFutura bold color6'>${params.value}</span>个`
        }
        this.$refs.pie.clear()
        setTimeout(()=> {
          if(self.$refs.pie){
            self.$refs.pie.mergeOptions(self.pie)
          }
        },300)
      })
      
    },
  },
}
</script>
<style lang="scss">
.empty{
    text-align:center;
    width:100%;
    height:100%;
    color:#ccc;
    font-size:13px;
}
</style>
<style lang="scss">
.ringpie-chart{
    position:relative;
    width:100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .charts-box {
      width: 244px;
      height: 244px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      .bg-box {
        width: 244px;
        height: 244px;
        border-radius: 50%;
        background: #F4F8FD;
        opacity: 1;
        position: absolute;
        top: 0;
        left: 0;
      }
      .echarts-box {
        width: 228px;
        height: 228px;
        position: relative;
        .echarts {
          width: 228px;
          height: 228px;
          margin: 0px;
          &::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 128px;
            height: 128px;
            background: #fff;
            border-radius: 50%;
          }
        }
        .text-box {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-weight: bolder;
          text-align: center;
          white-space: nowrap;
          .label {
              font-family: 'PingFang SC';
              font-weight: bold;
              line-height: 1;
              margin-bottom: 2px;
          }
          .number {
            line-height: 26px;
            font-family: Helvetica;
            letter-spacing: 1px;
            margin: 0;
          }
          .add {
            line-height: 1;
            letter-spacing: 1px;
            margin-top: 2px;
            padding-right: 10px;
          }
        }
      }
      
    }
    .legend-box {
      flex: 1;
      height: 244px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      padding: 0 18px 0 38px;
      align-content: space-around;
      &.around {
        justify-content: space-around;
      }
      .small-charts-box {
        height: 70px;
      }
      .quarter {
        width: 25%;
        justify-content: flex-start;
      }
      .width33 {
        width: 33%;
        justify-content: center;
        display: flex;
      }
    }
}
</style>
